<script setup lang="ts">
import {reactive, ref} from "vue";
import {getLogin} from "@/api/http";
import {Tokens} from "@/stores/token";

import md5 from '@/utils/md5.js'
import router from "@/router";
import {showToast, Toast} from "vant";
// 登录
// import {useUserCounter} from '@/stores/user'
// const userStore = useUserCounter()
const checked = ref(true);
// 登录
const username=ref('');
const password=ref('');
// const user = {username,password:md5.hexMD5(password)}
const uerinfo = Tokens()



const changeflag =ref(false)

let user =reactive({})
function Login() {
    console.log(username)
    console.log(password)
     user = {username:username.value,password:md5.hexMD5(password.value)}
    console.log(user)
    getLogin(user).then(res => {
        if (changeflag.value) {
            showToast('请同意协议')
        } else {
            showToast(res.msg)
            uerinfo.setToken(res.token)
            console.log(res.token)
            if (res.code==200) {
                localStorage.setItem('key',JSON.stringify(username.value,md5.hexMD5(password.value)))
                console.log(JSON.stringify(user))
                router.push('/home')
            } else  {
                console.log('失败')
            }
        }

})
    // console.log(username)
    // console.log(password)
    // getLogin(username,password).then((res)=> {
    //     console.log(res)

        // Tokens().setToken({username,password})
    // })
}



</script>

<template>
  <div class="topBox">

  </div>
  <div class="contentBox">
      <div class="centerBox">
          <div class="title_1">登录</div>
          <div class="title_2">
              <div>
                  欢迎使用 冀商传奇小程序
              </div>
              <div class="imgBox">
                  <img src="./images/微笑.png" alt="">
              </div>

          </div>
          <div class="title_3" >
              登录账号
          </div>
          <input class="username" placeholder="请输入账号" v-model="username">
          <div class="title_3">
              登录密码
          </div>
          <input type="password" class="password" placeholder="请输入密码" v-model="password">
          <button class="loginBtn" @click="Login">立即登录</button>
          <div class="bottomText">
              <div class="checkBox">
                  <div class="checkBtnBox">

                      <van-checkbox v-model="checked" checked-color="#ee0a24" icon-size="16px" @click="changeflag=!changeflag"></van-checkbox>

                      <!--                      <input type="checkbox" class="checkBtn" >-->
                  </div>
                  <div>我已阅读并同意 <span class="redWord">冀商用户协议、隐私协议</span></div>
              </div>
              <div>客服电话:15533903449 客服电话:15612138191</div>
          </div>
      </div>
  </div>

</template>

<style scoped>
.topBox {
    width: 100%;
    height: 150px;
    background-image: url("./images/login-bc.png");
}
.contentBox {
    margin-top: -35px;
    width: 100%;
    .centerBox {
        margin: 0 25.5px;
        .title_1 {
            font-size: 23px;
            margin-bottom: 20px;
        }
        .title_2 {
            display: flex;
            align-items: center;
            font-size: 17px;
            margin-bottom: 25.5px;
            .imgBox {
                margin-left: 10px;
            }
        }
        .title_3 {
            font-size: 16px;
            margin-bottom: 10.5px;
            margin-top: 20px;
        }
        > input {
            border: none;
            width: 100%;
            border-radius:10px ;
            height: 65px;
            padding-left: 10px;
            font-size: 17px;
        }
        .loginBtn {
            margin-top: 40px;
            margin-bottom: 20px;
            border: none;
            width: 100%;
            height: 50px;
            border-radius: 10px;
            background-color: #C81127;
            color: #fff;
            font-size: 15px;
            text-align: center;
        }
        .bottomText {
            //margin: 44px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            align-items: center;
            font-size: 13px;
            color: #AAAAAA;
            .checkBox {
                display: flex;
                align-items: center;
                .checkBtnBox {
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    margin-right: 5px;
                    .checkBtn {
                        width: 13px;
                        height: 13px;
                        border-radius: 50%;
                    }
                }
                .redWord {
                    color: #C81127;
                }
            }

        }
    }
}
</style>